<template>
  <div class="app-container setting-page">
    <el-table v-loading="loading" :data="tableData" highlight-current-row style="width: 100%; margin-top: 20px">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column property="approvalName" label="审批类型" width="120" />
      <el-table-column property="approvalUserNames" label="常规审批人" />
      <!-- <el-table-column property="approvalUserNames" label="异常审批人" /> -->
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" @click="openSettingDialog(scope.row)">设置 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="setting-card">
      <el-text class="setting-card-title">设置工厂返佣</el-text>
      <div class="setting-card-middle">
        <el-text type="info">审批员：</el-text>
        <el-space spacer="/" wrap alignment="flex-start">
          <div v-for="i in 2" :key="i">
            <el-text>{{ i }}</el-text>
          </div>
        </el-space>
      </div>
      <el-button type="primary" link @click="openSettingDialog"> 设置 </el-button>
    </div>
    <div class="setting-card">
      <el-text class="setting-card-title">取消工厂返佣</el-text>
      <div class="setting-card-middle">
        <el-text type="info">审批员：</el-text>
        <el-space spacer="/" wrap alignment="flex-start">
          <div v-for="i in 2" :key="i">
            <el-text>{{ i }}</el-text>
          </div>
        </el-space>
      </div>
      <el-button type="primary" link @click="openSettingDialog"> 设置 </el-button>
    </div>
    <div class="setting-card">
      <el-text class="setting-card-title">调整续约返点</el-text>
      <div class="setting-card-middle">
        <el-text type="info">审批员：</el-text>
        <el-space spacer="/" wrap alignment="flex-start">
          <div v-for="i in 2" :key="i">
            <el-text>阿斯顿</el-text>
          </div>
        </el-space>
      </div>
      <el-button type="primary" link @click="openSettingDialog"> 设置 </el-button>
    </div> -->

    <!-- 设置人员 弹窗 -->
    <el-dialog
      v-model="settingDialog"
      :close-on-click-modal="false"
      width="474"
      top="15vh"
      :title="settingForm.approvalName"
      @close="closeSettingDrawer(settingFormRef)"
    >
      <el-form v-loading="dialogLoading" ref="settingFormRef" :model="settingForm" label-position="left" label-width="100px">
        <el-form-item label="常规审批人">
          <el-select v-model="settingForm.approvalUserIds" multiple filterable placeholder="请选择" clearable style="width: 100%">
            <el-option v-for="item in userOptions" :key="item.userId" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="异常审批人">
          <el-select v-model="settingForm.approvalUserIds" multiple filterable placeholder="请选择" clearable style="width: 100%">
            <el-option v-for="item in userOptions" :key="item.userId" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item> -->
      </el-form>
      <!-- <div>
        <div>异常场景包括：</div>
        <p>1、工厂营销返佣比例不能低于2%</p>
        <p>2、工厂返佣阶梯中最高档返佣比例不能低于2%</p>
        <p>3、根据工厂主营品类，最高档目标金额不能高于规定值</p>
      </div> -->
      <template #footer>
        <div style="text-align: center">
          <el-button class="btn" @click="closeSettingDrawer(settingFormRef)">取消</el-button>
          <el-button class="btn" type="primary" :loading="btnLoading" @click="handelSubmitSetting(settingFormRef)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { pageList, approvalUserSelectQuery, addApprovalSetUsers } from "@/api/system/rebateRules/approvalSetting";
import { onMounted } from "vue";
const tableData = ref([]);
// 弹窗
const settingDialog = ref(false);
const openSettingDialog = row => {
  settingDialog.value = true;
  settingForm.value = { ...row };
  if (settingForm.value.approvalUserIds) {
    settingForm.value.approvalUserIds = settingForm.value.approvalUserIds.split("、");
    settingForm.value.approvalUserNames = settingForm.value.approvalUserNames.split("、");
  }
  getApprovalUser();
};
// 设置表单
const settingForm = ref({
  approvalUserIds: []
});
const settingFormRef = ref();
const userOptions = ref([]);

const btnLoading = ref(false);
// 提交设置表单
const handelSubmitSetting = formRef => {
  if (!formRef) return;
  formRef.validate((valid, fields) => {
    if (valid) {
      let queryData = { ...settingForm.value };
      if (queryData.approvalUserIds === "") {
        closeSettingDrawer(settingFormRef.value);
      } else {
        queryData.approvalUserNames = [];
        if (queryData.approvalUserIds?.length > 0) {
          queryData.approvalUserIds.map(item => {
            userOptions.value.map(el => {
              if (item == el.userId) {
                queryData.approvalUserNames.push(el.nickName);
              }
            });
          });
        }
        queryData.approvalUserIds = queryData.approvalUserIds.join("、");
        queryData.approvalUserNames = queryData.approvalUserNames.join("、");
        btnLoading.value = true;
        addApprovalSetUsers(queryData)
          .then(res => {
            closeSettingDrawer(settingFormRef.value);
            ElMessage.success("设置成功");
            getTable();
          })
          .catch(err => {
            btnLoading.value = false;
          });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
const closeSettingDrawer = formRef => {
  if (!formRef) return;
  formRef.resetFields();
  settingDialog.value = false;
  btnLoading.value = false;
  settingForm.value.approvalUserIds = [];
};
const loading = ref(false);
// 获取表格数据
const getTable = () => {
  loading.value = true;
  pageList().then(res => {
    tableData.value = res.data.list;
    loading.value = false;
  });
};
const dialogLoading = ref(false);
// 审批人选择查询
const getApprovalUser = () => {
  dialogLoading.value = true;
  approvalUserSelectQuery().then(res => {
    res.data?.forEach(item => {
      item.userId = String(item.userId);
    });
    userOptions.value = res.data;
    dialogLoading.value = false;
  });
};
onMounted(() => {
  getTable();
});
</script>
<style lang="scss" scoped>
.setting-card {
  display: flex;
  justify-content: space-between;
  background: #f5f7fa;
  border-radius: 4px;
  padding: 10px 20px;
  margin-bottom: 20px;
  &-title {
    width: 200px;
  }
  &-middle {
    flex: 1;
    margin-right: 50px;
    display: flex;
    text-wrap: nowrap;
  }
}
.btn {
  width: 120px;
  height: 36px;
  line-height: 36px;
}
</style>

<style lang="scss" scoped>
.factory-query {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.manage-renewal {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.btn {
  width: 120px;
  height: 36px;
  line-height: 36px;
}
</style>
<style lang="scss">
.setting-page {
  .el-dialog {
    margin-top: 200px;
  }
}
</style>
